import React from 'react';
import { observer } from 'mobx-react-lite';
import { cn } from '@/lib/utils';
import appStore from '@/store/app';

interface ThemeWrapperProps extends React.ComponentProps<'div'> {
    defaultTheme?: string;
}

export const ThemeWrapper = observer(({ defaultTheme, children, className }: ThemeWrapperProps) => {
    return (
        <div
            className={cn(`theme-${defaultTheme || appStore.config.theme}`, 'w-full', className)}
            style={
                {
                    '--radius': `${defaultTheme ? 0.5 : appStore.config.radius}rem`,
                } as React.CSSProperties
            }
        >
            {children}
        </div>
    );
});
